<template>
  <div>
    <div class="Edit_Div1"></div>
    <div class="NameEditCls">
      <el-row>
        <el-col :span="24">
          <div>
            <el-button @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回</el-button>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <!-- 表单开始 -->
          <el-form ref="ArticleFrom" :rules="rules" :model="ArticleFrom" label-width="100px" label-position="top"
            :inline="true" size="medium">

            <el-col :span="12">
              <!-- 类型下拉框 el-select-->
              <el-form-item label="类型" prop="TypeID">
                <el-select v-model="ArticleFrom.TypeID" placeholder="请选择" style="width:90%">
                  <el-option v-for="(item,index) in TypeList" :key="item.ID" :label="item.TypeName_CHS"
                    :value="item.ID">
                    {{item.TypeName_CHS}}
                    <span style="display:none" v-model="ArticleFrom.pk_Article"></span>
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 标题 el-input -->
              <el-form-item label="标题" prop="Title">
                <el-input v-model="ArticleFrom.Title" style="width:90%"></el-input>
              </el-form-item>

              <!-- 来源 el-input -->
              <el-form-item label="来源" prop="Source">
                <el-input v-model="ArticleFrom.Source" style="width:90%"></el-input>
              </el-form-item>

              <!-- 排序 el-input -->
              <el-form-item label="排序" prop="SortID">
                <el-input v-model.number="ArticleFrom.SortID" style="width:90%" placeholder="填写整数,默认为0,越大越靠前">
                </el-input>
              </el-form-item>

            </el-col>

            <el-col :span="12">
              <!-- 状态下拉框 el-select -->
              <el-form-item label="状态" prop="StatusID">
                <el-select v-model="ArticleFrom.StatusID" placeholder="请选择" style="width:90%">
                  <el-option v-for="(item,index) in StatusList" :key="item.ID" :label="item.StatusName_CHS"
                    :value="item.ID">
                    {{item.StatusName_CHS}}
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 标签 el-input -->
              <el-form-item label="标签" prop="Tags">
                <el-input v-model="ArticleFrom.Tags" style="width:90%" placeholder="用于搜索的关键字"></el-input>
              </el-form-item>

              <!-- 作者 el-input -->
              <el-form-item label="作者" prop="Author">
                <el-input v-model="ArticleFrom.Author" style="width:90%"></el-input>
              </el-form-item>

              <!-- 权限 el-input -->
              <el-form-item label="权限" prop="RolePower">
                <el-input v-model.number="ArticleFrom.RolePower" style="width:90%"
                  placeholder="填写整数,0为所有角色可见,具体参考角色管理的权限值">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <div v-if="Object.keys(ArticleFrom).length" id="mail" v-model="ArticleFrom.Description">
                </div>
              </el-form-item>
            </el-col>

            <el-form-item>
              <!-- 提交按钮 -->
              <el-button type="primary" size="small" icon="el-icon-check" @click="submit('ArticleFrom')">保存</el-button>
              <!-- 取消按钮 -->
              <el-button @click="$router.go(-1)" size="small" icon="el-icon-close" type="normal">取消</el-button>
            </el-form-item>

          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Edit_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
a {
  color: white;
  text-decoration: none;
}
.el-row {
  margin-bottom: 10px;
}
.NameEditCls {
  padding: 10px;
}
.el-form-item {
  width: 100%;
}
</style>
<script>
import E from "wangeditor";
var editor = new E('#mail')
export default {
  data () {
    return {
      //类型下拉框数据
      TypeList: [],
      //状态下拉框数据
      StatusList: [],
      //表单数据
      ArticleFrom: {
        TypeID: null,
        StatusID: null,
        Title: null,
        Tags: null,
        Source: null,
        Author: null,
        SortID: null,
        RolePower: null,
        Description: null
      },
      //添加修改bug修复
      SubmitLoading: false,
      //传进后台的Type
      Type: 'Add',
      rules: { // 表单验证规则
        TypeID: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
        Title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符' }
        ],
        Tags: [
          { required: true, message: '请输入标签', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符' }
        ],
        StatusID: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        Source: [
          { required: true, message: '请输入来源', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在1到50个字符' }
        ],
        Author: [
          { required: true, message: '请输入作者', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在1到20个字符' }
        ],
        SortID: [
          { required: true, message: '请输入排序', trigger: 'blur' },
          { type: 'integer', min: 1, max: 1000, message: '输入格式不正确', trigger: 'blur' }
        ],
        RolePower: [
          { required: true, message: '请输入权限', trigger: 'blur' },
          { type: 'integer', min: 1, max: 1000, message: '输入格式不正确', trigger: 'blur' }
        ],
        Description: [
          { required: true, message: '请输入News', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //获取当前登录用户自己的任务页面信息
    queryData () {
      this.$axios({
        url: '/HrApi/ArticleMange/SelectBinding',
        method: 'GET',
      }).then(res => {
        this.TypeList = res.data.TypeIDdata;
        this.StatusList = res.data.StatusIDdata;
      })
    },
    //增加和修改
    /*
      添加、修改任务
      Tyep:[Add/Edit],
      Article:表单值
    */
    //提交表单,添加角色
    submit (ArticleFrom) {
      //表单验证
      this.SubmitLoading = true,
        this.$refs[ArticleFrom].validate((valid) => {
          if (!valid) {
            return false;
          }
          //执行请求
          this.ArticleFrom.Description = editor.txt.html()
          this.$axios({
            url: '/HrApi/ArticleMange/EditArticleList',
            method: "POST",
            data: this.$Qs.stringify({
              Article: JSON.stringify(this.ArticleFrom),
              Type: this.Type,
              CreateUser: this.$store.state.UserInfo.pk_User,
            },
              {
                indices: false
              })
          }).then(res => {
            if (!res.data.code) {
              this.SubmitLoading = false,
                this.$message.success(res.data.msg)
              if (this.Type === "Add") {
                this.$refs[ArticleFrom].resetFields();
              }
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
    },
  },

  mounted () {

    this.queryData();
    if (Object.keys(this.$route.query).length) {
      this.Type = "Updata";
      this.$axios({
        url: '/HrApi/ArticleMange/GetModels',
        method: 'GET',
        params: {
          pk_Article: this.$route.query.id,
        }
      }).then(res => {
        if (!res.data.code) {
          this.ArticleFrom = res.data.data;
          this.$nextTick(_ => {

            editor.create()
            editor.txt.html(this.ArticleFrom.Description)
          })

        } else {
          this.$message.error(res.data.msg)
        }
      })
    } else {
      editor.create()
    }
  }
}
</script>